<template>
    <div class="login-body">
        <div class="login_bg">
            <img src="@/assets/imgs/background.svg" />
        </div>
        <div class="login_form">
            <div class="title">博言大模型管理系统系统</div>
            <div class="form">
                <Form ref="ruleForm" :model="form" :rules="rules" :label-width="0">
                    <FormItem  prop="username">
                        <Input prefix="ios-contact-outline" v-model="form.username" placeholder="请输入用户名" clearable  @on-keyup.enter="enterSubmit"></Input>
                    </FormItem>
                    <FormItem  prop="password">
                        <Input type="password" prefix="ios-lock-outline" v-model="form.password" password placeholder="请输入密码" clearable  @on-keyup.enter="enterSubmit"></Input>
                    </FormItem>
                </Form>
                <Button type="primary" style="width: 100%;height: 44px;" @click="submitForm">登录</Button>
            </div>
            <div class="desc">Ukefu.cn Copyright © 2018版权所有</div>
        </div>
        <div class="lang_box">
            <Dropdown>
                <a href="javascript:void(0)">
                    {{ langObj[langVal] }}
                    <Icon type="ios-arrow-down"></Icon>
                </a>
                <template #list>
                    <DropdownMenu>
                        <DropdownItem @click="changeLang('zh-CN')">中文（简体）</DropdownItem>
                        <DropdownItem @click="changeLang('zh-TW')">中文（繁體）</DropdownItem>
                        <DropdownItem @click="changeLang('en-US')">English</DropdownItem>
                    </DropdownMenu>
                </template>
            </Dropdown>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed, watch } from 'vue';
import { useRoute, useRouter } from "vue-router";
import { navTabStore } from '@/store/navTab';
import { langStore } from '@/store/lang';
import { userStore } from '@/store/userInfo';


// 用户信息
const userInfo = userStore();

// 语言
const languageStroe = langStore();

// 横向导航
const navTab = navTabStore();

// 当前对象
const { proxy } = getCurrentInstance();

// 路由
const router = useRouter();

// 表单字段
const form = ref({
    username: 'admin',
    password: 'asdqwe123',
    // password: 'yKf2023@'
});

// 表单ref
const ruleForm = ref(null);

// 校验规则
const rules = reactive({
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
});

// 语言对象
const langObj = {
    'en-US': 'English',
    'zh-CN': '中文（简体）',
    'zh-TW': '中文（繁體）'
}

// 语言值
const langVal = ref('');

// 监听切换语言
watch(() => (languageStroe.language),
    (val) => {
        langVal.value = val
    },
    {
        immediate: true,
        deep: true,
    }
)

// 回车提交
const enterSubmit = (e) => {
    if (e.code == 'Enter') {
        submitForm();
    }
}

// 提交表单
const submitForm = async () => {
    let valid = await ruleForm.value.validate((valid, fild) => valid ? valid : fild);
    if (valid) {
        await userInfo.userLogin({
            username: form.value.username,
            password: form.value.password
        })
        navTab.$reset();
        proxy.$Message.success('登录成功');
        router.push('/statistics')
    }
}

// 切换语言
const changeLang = (lang) => {
    location.reload();
    languageStroe.setLanguage(lang);
}

</script>

<style lang="scss">
.login-body {
    width: 100%;
    height: 100%;
    display: flex;

    .login_bg {
        width: 65%;
        font-size: 0;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .login_form {
        display: flex;
        flex-direction: column;
        padding: 80px;
        width: 35%;
        background-color: #fff;
        .title {
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 70px;
            text-align: center;
        }
        .form {
            .ivu-input {
                height: 44px;
            }

            .ivu-form-item-content {
                margin-bottom: 20px;
                i {
                    line-height: 44px;
                }
            }
        }
        .desc {
            margin-top: auto;
            text-align: center;
            color: #49505C;
        }
    }
}

.lang_box {
    position: fixed;
    cursor: pointer;
    right: 1%;
    top: 1%;
}

.lang_box :focus-visible {
    outline: none;
}
</style>